<template>
  <div class="newCourseAuthContainer">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          添加授权
          <div class="close" @click="cancel()"></div>
        </div>
        <div>
          <el-form label-width="140px">
            <el-form-item label="授权校区" :rules="[
      { required: true, message: ''}]">
              <el-select
                style="width:30%;"
                ref="campusId"
                v-model="authData.campusId"
                clearable
                @change="campusChange"
                filterable 
                placeholder="请选择校区"
              >
                <el-option
                  v-for="item in campusList"
                  :key="item.campusId"
                  :label="item.name"
                  :value="item.campusId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="授权课程" :rules="[
      { required: true, message: ''}]">
              <div
                v-for="item,index in authData.courseAuthorizeSettingList"
                style="margin-bottom:0.1rem;"
              >
                <el-select
                  :ref="item.libraryCourseId"
                  v-model="item.libraryCourseId"
                  @change="libraryCourseChange($event,index)"
                  placeholder="请选择课程"
                  style="width:30%; "
                >
                  <el-option
                    v-for="item in courseList"
                    :key="item.libraryCourseId"
                    :label="item.libraryCourseName"
                    :value="item.libraryCourseId"
                  ></el-option>
                </el-select>&nbsp;&nbsp;&nbsp;&nbsp;授权班级数
                <el-input-number
                  size="small"
                  style="width:12%"
                  controls-position="right"
                  class="newclassroomNumber"
                  :ref="item.authorizeClassNum"
                  v-model="item.authorizeClassNum"
                  :min="1"
                  :max="999"
                ></el-input-number>
                <span>
                  <span class="add_btn" @click="addCourseAuth"></span>
                  <span class="reduce_btn" @click="deleteCourseAuth(index)"></span>
                </span>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn_div">
          <div class="btn_sure" @click="sure()">确 认</div>
          <div class="btn_cancel" @click="cancel()">取 消</div>
        </div>
      </div>
    </div>
    <el-dialog
      title="订单确认"
      :visible.sync="dialogFormVisible"
      width="30%"
      :close-on-click-modal="false"
      center
    >
      <div style="font-size:0.16rem;margin-left:0.2rem;margin-bottom:0.2rem;">{{campusName}}</div>
      <el-form label-position="left" style="margin-left:0.2rem;">
        <el-form-item
          style="margin-bottom: 0rem;"
          v-for="item,index in authData.courseAuthorizeSettingList"
          :key="item.libraryCourseId"
          :label="item.libraryCourseName"
        >授权班级数 {{item.authorizeClassNum}}</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="createCourseAuth">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var vm;
let user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      dialogFormVisible: false,
      campusName: "",
      authData: {
        campusId: "",
        orgId: "",
        courseAuthorizeSettingList: [
          {
            libraryCourseId: "",
            libraryCourseName: "",
            authorizeClassNum: ""
          }
        ]
      },
      courseList: [],
      campusList: []
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      vm.authData.orgId = user.orgId;
      vm.initData();
    },
    createCourseAuth() {
      vm.authData._wait = "";
      api.courseauthorizeorderAdd(vm.authData).then(function(data) {
        if (data.resultCode == 2000) {
          vm.$message({
            message: "添加成功",
            type: "success"
          });
          vm.dialogFormVisible = false;
          vm.$emit("callback", "添加成功");
          vm.cancel();
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**课程改变 */
    libraryCourseChange(val, index) {
      vm.courseList.forEach(item => {
        if (item.libraryCourseId == val) {
          vm.authData.courseAuthorizeSettingList[index].libraryCourseName =
            item.libraryCourseName + "：";
          return;
        }
      });
    },
    /**校区改变 */
    campusChange(val) {
      vm.campusList.forEach(item => {
        if (item.campusId == val) {
          vm.campusName = item.name;
          return;
        }
      });
      api.getCourseLibraryList({ campusId: val }).then(function(data) {
        if (data.resultCode == 2000) {
          vm.courseList = data.list;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    initData() {
      api.campusListByOrg({ orgId: user.orgId }).then(function(data) {
        if (data.resultCode == 2000) {
          vm.campusList = data.list;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    sure() {
      var rules = [];
      let campusId = this.$refs.campusId;
      rules.push({
        judge: vm.authData.campusId,
        focus: campusId,
        tips: "请选择校区"
      });
      vm.authData.courseAuthorizeSettingList.forEach(function(item, index) {
        rules = rules.concat([
          {
            judge: item.libraryCourseId,
            focus: vm.$refs[item.libraryCourseId][0],
            tips: "请选择课程"
          },
          {
            judge: item.authorizeClassNum,
            focus: vm.$refs[item.authorizeClassNum][0],
            tips: "请输入授权班级数"
          }
        ]);
      });
      if (!tool.validate(rules)) {
        return;
      }
      vm.dialogFormVisible = true;
    },
    deleteCourseAuth(index) {
      if (this.authData.courseAuthorizeSettingList.length == 1) {
        this.authData.courseAuthorizeSettingList = [];
        this.authData.courseAuthorizeSettingList.push({
          libraryCourseId: "",
          authorizeClassNum: ""
        });
      } else {
        this.authData.courseAuthorizeSettingList.splice(index, 1);
      }
    },
    addCourseAuth() {
      vm.authData.courseAuthorizeSettingList.push({
        libraryCourseId: "",
        authorizeClassNum: ""
      });
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
        vm.campusName = "";
        vm.authData = {
          campusId: "",
          orgId: "",
          courseAuthorizeSettingList: [
            {
              libraryCourseId: "",
              libraryCourseName: "",
              authorizeClassNum: ""
            }
          ]
        };
        vm.courseList = [];
        vm.campusList = [];
      }, 500);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
  }
};
</script>
<style lang="scss">
.newCourseAuthContainer {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }

  .el-form-item__content {
    line-height: 0.4rem;
    position: relative;
    font-size: 0.16rem;
  }
}
</style>
<style scoped src="@/style/clue_manage/clue_add.css"></style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  width: 10rem;
  padding-bottom: 0.2rem;
}
</style>

